<template>
    <div style="display: flex;">
        <a-menu mode="inline" theme="dark" @click="handleMenuClick" v-model:selectedKeys="current" :items="items" style="width: 250px; font-size: large; font-weight: bolder;" />
        <div v-if="current[0] != 'new' && detail == false" style="height: 850px;">
            <RoomList :id="current[0]" :key="refreshKey" style="margin-left: 100px;" @roomEdit="handleRoomEdit"/>
        </div>
        <div v-else-if="detail == true">
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="管理房间信息"
            @back="handleTurnBack"
          />
            <RoomEdit :id="roomId" />
        </div>
        <div v-else style="height: 850px;">
            <NewRoom style="margin-left: 100px;" :id="0" />
        </div>
    </div>
</template>

<script lang="ts">
import RoomList from './roomList.vue'
import NewRoom from './newRoom.vue'
import RoomEdit from './roomEdit.vue'

export default {
    name: 'Rooms',
    components: {
        RoomList,
        NewRoom,
        RoomEdit
    }
}
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive, defineComponent } from 'vue';
import { MenuProps } from 'ant-design-vue';
import router from '@/router/index';

const current = ref<string[]>(['all']);
const items = ref<MenuProps['items']>([
{
  key: 'all',
  label: '全部房间',
  title: '全部房间',
},
{
  key: 'joined',
  label: '我加入的',
  title: '我加入的',
},
{
  key: 'managed',
  label: '我管理的',
  title: '我管理的',
},
{
  key: 'created',
  label: '我创建的',
  title: '我创建的',
},
{
  key: 'new',
  label: '新建房间',
  title: '新建房间'
},
{
  key: 'back',
  label: '返回首页',
  title: '返回首页'
}
])
const detail = ref<boolean>(false)
const roomId = ref<number>(0)
const refreshKey = ref<number>(0)

const handleMenuClick: MenuProps['onClick'] = async menuInfo => {
  if (menuInfo.key === 'back') {
    router.push( {name: 'main'} )
  }
  refreshKey.value += 1
};

const handleRoomEdit = (id:number) => {
    detail.value = true
    roomId.value = id
}

const handleTurnBack = () => {
    detail.value = false
}
</script>